---
title: lint-staged
description: Führen Sie Ultracite automatisch für Ihre zum Commit vorgemerkten Git-Dateien mit lint-staged aus
---

Ultracite integriert sich nahtlos mit [lint-staged](https://github.com/okonet/lint-staged), um Ihren Code vor jedem Commit automatisch zu formatieren und zu linten. Dadurch wird sichergestellt, dass nur sauberer, korrekt formatierter Code in Ihr Repository gelangt.

## Was ist lint-staged?

lint-staged ist ein Tool, das Linter und Formatter auf vorgemerkte Git-Dateien anwendet. Es ist besonders nützlich, weil es:

- Verarbeitet nur Dateien, die tatsächlich zum Commit vorgesehen sind
- Verhindert, dass schlecht formatierten Code in Ihr Repository gelangt
- Läuft schnell, da nur geänderte Dateien geprüft werden
- Lässt sich perfekt in Git-Hooks integrieren

## Wie Ultracite lint-staged verwendet

Wenn Sie `npx ultracite init` ausführen und die lint-staged-Option auswählen, macht Ultracite automatisch:

1. **Installiert lint-staged** als Entwicklungsabhängigkeit
2. **Erstellt oder aktualisiert** Ihre lint-staged-Konfiguration
3. **Konfiguriert den Formatter** so, dass er für relevante Dateitypen ausgeführt wird

Die Standardkonfiguration führt `npx ultracite fix` für diese Dateitypen aus:
- JavaScript-/TypeScript-Dateien (`.js`, `.jsx`, `.ts`, `.tsx`)
- JSON-Dateien (`.json`, `.jsonc`)
- CSS-Dateien (`.css`, `.scss`)
- Markdown-Dateien (`.md`, `.mdx`)

## Unterstützte Konfigurationsformate

Die lint-staged-Integration von Ultracite unterstützt alle standardmäßigen lint-staged-Konfigurationsformate:

### package.json

```json title="package.json"
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
  }
}
```

### .lintstagedrc.json

```json title=".lintstagedrc.json"
{
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
}
```

### .lintstagedrc.js (CommonJS)

```javascript title=".lintstagedrc.js"
module.exports = {
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
};
```

### .lintstagedrc.mjs (ES Modules)

```javascript title=".lintstagedrc.mjs"
export default {
  "*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}": ["npx ultracite fix"]
};
```

### .lintstagedrc.yaml

```yaml title=".lintstagedrc.yaml"
"*.{js,jsx,ts,tsx,json,jsonc,css,scss,md,mdx}":
  - 'npx ultracite fix'
```

## Intelligentes Zusammenführen von Konfigurationen

Wenn Sie bereits eine lint-staged-Konfiguration haben, wird Ultracite:

- **Ihre bestehende Konfiguration erkennen**
- **Die Ultracite-Regeln mit Ihren vorhandenen Regeln zusammenführen**
- **Ihre benutzerdefinierten Einstellungen bewahren**
- **Die Datei an Ort und Stelle aktualisieren**

Das bedeutet, dass Sie `npx ultracite init` sicher ausführen können, selbst wenn lint-staged bereits eingerichtet ist.

## Wie es funktioniert

1. **Pre-commit-Hook**: lint-staged läuft vor jedem Commit über Husky
2. **Dateierkennung**: Es werden nur vorgemerkte Dateien verarbeitet, die den Mustern entsprechen
3. **Format-Befehl**: `npx ultracite fix` wird für jede passende Datei ausgeführt
4. **Automatisches Beheben**: Biome behebt Probleme automatisch, wenn möglich
5. **Erneutes Staging**: Korrigierte Dateien werden automatisch wieder zum Commit vorgemerkt

## Manuelle Konfiguration

Wenn Sie Ihre lint-staged-Einrichtung anpassen müssen, können Sie die Konfiguration nach der Initialisierung ändern:

```json title="package.json"
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["npx ultracite fix", "npm run test:unit"],
    "*.{json,jsonc}": ["npx ultracite fix"],
    "*.{css,scss}": ["npx ultracite fix", "npm run test:styles"],
    "*.{md,mdx}": ["npx ultracite fix"]
  }
}
```

## Befehlsintegration

Die lint-staged-Integration funktioniert mit Ultracites Befehlsstruktur:

- **`npx ultracite fix`**: Führt Biome mit automatischer Fehlerbehebung aus (von lint-staged verwendet)
- **`npx ultracite check`**: Führt Biome ohne automatische Fehlerbehebung aus (für CI/manuelle Prüfungen)

## Fehlerbehebung

### Konfiguration nicht gefunden
Wenn Sie Fehlermeldungen über fehlende lint-staged-Konfiguration sehen:

```bash
npx ultracite init  # Re-run initialization
```

### ESM-/CommonJS-Probleme
Ultracite erkennt automatisch den Projekttyp und erstellt das passende Konfigurationsformat:

- **ESM-Projekte** (mit `"type": "module"` in package.json) erhalten `.mjs`-Konfigurationen
- **CommonJS-Projekte** erhalten `.cjs`-Konfigurationen
- **Fallback**: Erstellt `.lintstagedrc.json`, falls die Modulerkennung fehlschlägt

### Konflikte mit vorhandener Konfiguration
Wenn Sie komplexe vorhandene Konfigurationen haben, müssen Sie möglicherweise manuell zusammenführen:

1. Sichern Sie Ihre bestehende lint-staged-Konfiguration
2. Führen Sie `npx ultracite init` aus
3. Führen Sie eine manuelle Zusammenführung aller benutzerdefinierten Regeln durch, die Sie beibehalten möchten

## Bewährte Vorgehensweisen

1. **Halten Sie es schnell**: Führen Sie in lint-staged nur essentielle Prüfungen aus
2. **Verwenden Sie spezifische Muster**: Zielen Sie nur auf die Dateien, die verarbeitet werden müssen
3. **Kombinieren Sie mit CI**: Nutzen Sie lint-staged für schnelle lokale Prüfungen, vollständiges Linting in CI
4. **Testen Sie Ihre Einrichtung**: Machen Sie einen Test-Commit, um sicherzustellen, dass alles funktioniert

## Verwandte

- [Husky-Integration](/integration/husky) - Einrichtung von Git-Hooks
- [Konfiguration](/configuration) - Biome-Konfigurationsoptionen
- [Einrichtung](/setup) - Ersteinrichtung des Projekts